<template>
  <div class="artists-introduce ">
    <div class="mt-2" v-if="store.songDetails?.artist?.name">
      <div class="intro">
        <h3 class=" yu-titleColor">{{ store.songDetails?.artist?.name }}简介</h3>
        <span class="leading-8 text-sm ">{{ briefDesc }}</span>
      </div>
      <ul v-if="introduction.length > 0">
        <li v-for="intro in introduction" :key="intro.ti">
          <h4 class="yu-titleColor">{{ intro.ti }}</h4>
          <span class="leading-8 text-sm">{{ intro.txt }}</span>
        </li>
      </ul>
    </div>
    <loading v-else/>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {useRoute} from "vue-router";
import {reactive, toRefs} from "vue";

const route = useRoute()
const store = useStore()
// 设置tab下标
store.songTabIndex = 3
const data = reactive({
  briefDesc: '', // 歌手描述
  introduction: [] // 代表作
})
const {briefDesc, introduction} = toRefs(data)

// 获取艺人介绍
store.getArtistDesc(route.query.id).then(res => {
  data.briefDesc = res.briefDesc
  data.introduction = res.introduction
  // console.log(res)
})
</script>

<style scoped>

</style>
